<template>
	<div id="view-404">
		<UIImage class="notfound-image" :src="notfoundImage" />
		
		<div class="notfound-act">
			<span>走丢路由：{{route.path}}</span>
			<div>
				<el-button @click="goBack" type="primary">返回</el-button>
				<el-button @click="goHome" type="primary">前往主页</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	
	import { defineComponent } from "vue";
	
	export default defineComponent({
		name: '404View'
	})
	
</script>

<script setup>

	import { useRoute, useRouter } from 'vue-router';
	import UIImage from '@/ui/image';
	import notfoundImage from "@/assets/image/notfound.png";
		
	const route = useRoute();
	const router = useRouter();
	
	function goBack() {
		router.go(-1);
	}
	
	function goHome() {
		router.push({ name: 'home' });
	}
	
</script>

<style lang="scss" scoped>
	
	@import '@/theme/define/index.scss';
	
	#view-404 {
		@include viewLayout;
	}
	
	.notfound-image {
		display: block;
		margin: 0 auto;
		width: min(100%, 520px);
	}
	
	.notfound-act {
		margin: 20px 0;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
	}
	
</style>